<template>
  <!--开票审请-->
  <BasicModal :title="getTitle" :width="500" :canFullscreen="false" :centered="true"
              :destroyOnClose="true" @register="registerModal" @ok="handleSubmit"
  >
    <a-form ref="registerForm" :model="model" :rules="validatorRules" :labelCol="{ span: 5 }" :wrapperCol="{ span: 14 }">
      <a-input type="hidden" v-model:value="model.id"/>
      <a-input type="hidden" v-model:value="model.invoiceSflx"/>
      <a-input type="hidden" v-model:value="model.invoiceOrderId"/>
      <a-input type="hidden" v-model:value="model.dwmc"/>

      <a-form-item label="回票日期" name="invoiceDate">
        <a-date-picker
          v-model:value="model.invoiceDate"
          valueFormat="YYYY-MM-DD"
          placeholder=""
          style="width: 130px"
        />
      </a-form-item>

      <a-form-item label="回票金额" name="fkje">
        <a-input type="text" autocomplete="off" v-model:value="model.fkje" />
      </a-form-item>

      <a-form-item label="发票张数" name="number">
        <a-input type="text" autocomplete="off" v-model:value="model.number" />
      </a-form-item>

      <a-form-item label="发票内容" >
        <a-input type="text" autocomplete="off" v-model:value="model.content" />
      </a-form-item>

      <a-form-item label="备注" >
        <a-input type="text" autocomplete="off" v-model:value="model.bz" />
      </a-form-item>

    </a-form>
  </BasicModal>
</template>

<script lang="ts" setup>
import { ref, computed, unref, reactive, watch } from "vue";
import { BasicModal, useModalInner } from "/@/components/Modal";
import { invoiceInfoAdd, invoiceInfoById } from "../types/invoice.api";
import { useMessage } from "/@/hooks/web/useMessage";
import { ValidateErrorEntity } from "ant-design-vue/es/form/interface";

import moment from 'dayjs'

const isUpdate = ref(false);
const { createMessage: $message } = useMessage();

const emit = defineEmits(['success', 'register']);

//表单modal
let info   = reactive<any>({})
let model  = reactive<any>({})

//表单赋值 async
const [registerModal, { closeModal, setModalProps }] = useModalInner( async (data) => {

  setModalProps({ confirmLoading: false });
  let record = data.record
  isUpdate.value = data.isUpdate
  let params = {
    id: record.id,
    businessId: record.businessId,
    copy: record.copy
  }

  //新增
  if(isUpdate.value) {
    await invoiceInfoById(params).then((res) => {
      if (res.success) {
        let result = res.result
        Object.assign(model, result)
      } else {
        $message.error(res.message);
      }
    })
  } else {
    let result = { 
      id: '',
      invoiceType : '1', //付款
      invoiceDate : moment().format("YYYY-MM-DD"),
      invoiceOrderId : record.businessId,
      type: record.type,
      fkje: '',
      number: '',
      content: '',
      bz: '',
    }
    Object.assign(model, result)
  }
});

//标题
const getTitle = computed(() => (!unref(isUpdate) ? '回票信息' : '编辑'));

const validatorRules = {
  invoiceDate: [{ required: true, message: "不能为空!" }],
  fkje: [{ required: true, message: "不能为空!" }],
  number: [{ required: true, message: "不能为空!" }],
};

//表单提交事件
const registerForm = ref();
function handleSubmit() {
  registerForm.value.validate().then(async () => {
    try {
      await invoiceInfoAdd(model).then((res) => {
        if (res.success == true) {
          closeModal();
          emit("success");
          $message.success("操作成功！")
        } else {
          $message.warn(res.message)
        }
      });
    } finally {

    }
  }).catch((error: ValidateErrorEntity<any>) => {
    console.log("error", error);
  });
}

</script>

<style lang="less" scoped>
.formtable .inputxt {
  border: 1px solid #D7D7D7;
  border-radius: 3PX;
  padding: 7px 0 7px 5px;
  line-height: 14PX;
  font-size: 12px;
  display: inline-block;
  width: 200px;
}

.formtable .input_text:focus {
  border: 1px solid #06F;
  box-shadow: inset 0 1px 2px rgba(0, 102, 255, 0.3);
}

.formtable select {
  padding: 6px 2px;
  width: 155px;
}
.Validform_label {
  font-size: 12px;
  padding: 5px;
  white-space: nowrap;
}
.formtable {
  width: 100%;
  background-color: #ddd;
  align: right;
}
.formtable tr {
  background-color: #FAFAFA;
  align: right;
}
</style>
